<template>
	<view class="container">

<!--    <view class="debug-test-btn" @tap="goToLocationTest" v-if="showDebugBtn">-->
<!--      <text>定位测试</text>-->
<!--    </view>-->
		<!-- 根据地图状态显示/隐藏主界面内容 -->
		<view v-if="!isMapExpanded">
			<!-- 搜索栏 -->
<!--			<view class="search-bar">-->
<!--				<view class="location-icon">📍</view>-->
<!--				<input type="text" placeholder="请输入关键字进行搜索" class="search-input" />-->
<!--			</view>-->

			<!-- 轮播图部分 -->
			<view class="banner-container">
				<swiper class="banner-swiper" 
					:indicator-dots="true"
					:autoplay="true"
					:interval="3000"
					:duration="500"
					circular>
					<swiper-item v-for="(item, index) in bannerList" :key="index" @tap="handleBannerClick(item)">
						<image :src="item.imageUrl" class="banner-image" mode="aspectFill" @error="handleImageError(index)"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 报名入口 -->
			<view class="signup-entrance">
<!--				<view class="entrance-title">报名入口</view>-->
				<view class="entrance-button" @tap="handleSignup">
					<text>立即报名 ></text>
				</view>
			</view>

			<!-- 功能按钮 -->
			<view class="function-buttons">
				<view class="function-button orange" @tap="handleTeacher">
					<view class="icon-wrap">老师</view>
					<view class="button-content">
						<text class="main-text">做老师</text>
						<text class="sub-text">大量订单随时接</text>
					</view>
				</view>
				<view class="function-button green" @tap="handleFindTeacher">
					<view class="icon-wrap">家长</view>
					<view class="button-content">
						<text class="main-text">找家教</text>
						<text class="sub-text">海量老师任你选</text>
					</view>
				</view>
			</view>

			<!-- 科目分类 -->
			<view class="subject-grid">
				<view class="subject-item" v-for="(subject, index) in subjects" :key="index" @tap="navigateToTeacherList(subject.name)">
					<image :src="subject.icon" class="subject-icon" />
					<text class="subject-name">{{ subject.name }}</text>
				</view>
			</view>

			<!-- 推荐科目 -->
			<view class="recommend-section">
				<view class="section-header">
					<text class="section-title">{{ recommendTitles }}</text>
<!--					<view class="header-actions">  待后续完成-->
<!--						<text class="action-item" @tap="navigateToRecommend">个性推荐</text>-->
<!--						<text class="action-item" @tap="goMore">更多</text>-->
<!--					</view>-->
				</view>
				<view class="course-grid">
					<view 
						class="course-item" 
						v-for="course in recommendCourses" 
						:key="course.id"
						@tap="navigateToCourse(course.id)"
					>
						<image class="course-image" :src="course.cover_image" mode="aspectFill"></image>
						<view class="course-info">
							<text class="course-name">{{ course.title }}</text>
							<view class="course-price">
								<text class="price">¥{{ course.price }}</text>
								<text class="original-price">¥{{ course.original_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 教师排行榜 -->
			<view class="ranking-section">
				<view class="section-header">
					<text class="section-title">教师排行榜</text>
					<view class="header-actions">
						<text class="action-item" :class="{ active: rankingType === 'rating' }" @tap="switchRankingType('rating')">评分榜</text>
						<text class="action-item" :class="{ active: rankingType === 'popularity' }" @tap="switchRankingType('popularity')">热度榜</text>
					</view>
				</view>

				<!-- 排行榜列表 -->
				<view class="ranking-list" v-if="rankingList.length > 0">
					<view
						class="ranking-item"
						v-for="(teacher, index) in rankingList"
						:key="teacher.teacherId"
						@tap="navigateToTeacherDetail(teacher.teacherId)"
					>
						<!-- 排名 -->
						<view class="rank-number" :class="getRankClass(teacher.rank)">
							<text class="rank-text">{{ teacher.rank }}</text>
						</view>

						<!-- 教师信息 -->
						<view class="teacher-info">
							<image class="teacher-avatar" :src="teacher.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
							<view class="teacher-details">
								<view class="teacher-name-line">
									<text class="teacher-name">{{ teacher.teacherName }}</text>
									<view class="certification-badge" v-if="teacher.certificationStatus === 2">
										<text class="badge-text">认证</text>
									</view>
								</view>
								<view class="teacher-stats">
									<text class="stat-item" v-if="rankingType === 'rating'">
										⭐ {{ teacher.averageRating.toFixed(1) }} ({{ teacher.totalRatings }}评)
									</text>
									<text class="stat-item" v-if="rankingType === 'popularity'">
										🔥 {{ teacher.totalRatings }}条评价
									</text>
									<text class="stat-item">{{ teacher.teachingAge }}年经验</text>
								</view>
							</view>
						</view>

						<!-- 右侧信息 -->
						<view class="ranking-extra">
							<view class="score-display" v-if="rankingType === 'rating'">
								<text class="score-number">{{ teacher.averageRating.toFixed(1) }}</text>
								<text class="score-label">评分</text>
							</view>
							<view class="score-display" v-if="rankingType === 'popularity'">
								<text class="score-number">{{ teacher.totalRatings }}</text>
								<text class="score-label">评价</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view class="ranking-loading" v-else-if="isLoadingRanking">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 空状态 -->
				<view class="ranking-empty" v-else>
					<text class="empty-text">暂无排行数据</text>
				</view>
			</view>
		</view>

		<!-- 地图部分 -->
		<view 
			class="map-container" 
			:class="{ 'map-expanded': isMapExpanded }"
		>
			<!-- 上滑提示条 -->
			<view 
				class="drag-indicator"
				@touchstart="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
			>
				<view class="drag-bar"></view>
				<text class="drag-text">{{ isMapExpanded ? '点击关闭' : '上滑查看附近老师' }}</text>
				<view v-if="isMapExpanded" class="close-btn" @tap="collapseMap">×</view>
			</view>
			
			<!-- 地图组件 -->
			<view v-if="isMapExpanded" class="map-content">
				<!-- 返回首页按钮 -->
				<view class="back-to-home" @tap="collapseMap">
					<text>返回首页</text>
				</view>
				
				<!-- 搜索半径设置 -->
				<view class="radius-control">
					<text class="radius-label">搜索范围: {{searchRadius}}公里</text>
					<view class="radius-actions">
						<view class="radius-btn" @tap="decreaseRadius">-</view>
						<view class="radius-btn" @tap="increaseRadius">+</view>
					</view>
					<view class="radius-btn search-btn" @tap="refreshNearbyTeachers">
						<text>搜索</text>
					</view>
				</view>
				
				<!-- 定位按钮 -->
				<view class="location-btn" @tap="forceRelocate">
					<view class="location-icon-wrapper">
						<text class="location-icon-text">📍</text>
					</view>
				</view>

				<!-- 重新定位按钮 -->
				<view class="clear-cache-btn" @tap="clearLocationCache">
					<view class="clear-cache-icon-wrapper">
						<text class="clear-cache-icon-text">🔄</text>
					</view>
				</view>
				
				<map 
					id="teacherMap"
					class="teacher-map"
					:latitude="latitude"
					:longitude="longitude"
					:markers="markers"
					:scale="13"
					:show-location="true"
					:show-compass="true"
					:enable-traffic="false"
					:enable-rotate="true"
					:enable-3D="false"
					:show-scale="true"
					:enable-poi="true"
					:enable-overlooking="false"
					@markertap="handleMarkerTap"
				></map>
				
				<!-- 错误提示覆盖层 -->
				<view v-if="mapError" class="map-error-overlay">
					<text>{{ mapErrorMessage }}</text>
					<button class="retry-btn" @tap="retryGetTeachers">重试</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { homeApi } from '@/api/home.js'
	import { mapApi } from '@/api/map.js'
	import { recommendApi } from '@/api/recommend.js'
	import { teacherApi } from '@/api/teacher.js'
	import locationHelper from '@/utils/locationHelper.js'
	// import { log } from 'console'

	export default {
		data() {
			return {
        showDebugBtn: true, // 开发时设为true，发布时设为false todo
				bannerList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				subjects: [
					{ name: '小学语文', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoyu.png' },
					{ name: '小学数学', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoxue.png' },
					{ name: '小学英语', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoying.png' },
					{ name: '初中语文', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoyu.png' },
					{ name: '初中数学', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoxue.png' },
					{ name: '初中英语', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoying.png' },
					{ name: '初中物理', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/wuli.png' },
					{ name: '初中化学', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/huaxue.png' },
					{ name: '高中数学', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/xiaoyu.png' },
					{ name: '单词速记', icon: 'http://101.200.154.121:19000/teacher-manage-static/static/kemu/image.png' }
				],
				recommendCourses: [],
				// 地图相关数据
				isMapExpanded: false,
				latitude: 38.8721, // 默认用户位置纬度
				longitude: 115.4925, // 默认用户位置经度
				markers: [],
				nearbyTeachers: [],
				touchStartY: 0,
				touchMoveY: 0,
				mapHeight: 0,
				isDragging: false,
				mapError: false,
				mapErrorMessage: '',
				touchStartTime: 0,
				searchRadius: 10,  // 默认搜索半径为10公里
				useFixedLocation: false, // 不使用固定位置模式
				recommendTitles: '推荐科目',
				userinfo:{},
				// 排行榜相关数据
				rankingType: 'rating', // rating: 评分榜, popularity: 人气榜
				rankingList: [],
				isLoadingRanking: false
			}
		},
		onLoad() {
			this.getBannerList()
			this.getRecommendCourses()
			this.getRankingList()
			// 获取用户位置
			this.getUserLocation()
			// 获取当前登录用户信息
			this.userinfo = uni.getStorageSync('userInfo')
			console.log("当前登录的用户信息："+JSON.stringify(this.userinfo))
		},
		methods: {
      // 跳转到定位测试页面 todo
      goToLocationTest() {
        uni.navigateTo({
          url: '/pages/debug/location-test'
        })
      },
			handleSignup() {
				// 如果当前角色不是 老师，可以进行跳转
				uni.navigateTo({
					url: '/pages/signup/grade-subject-select'
				})
			},
			// 处理轮播图点击
			handleBannerClick(banner) {
				if (banner.linkUrl) {
					uni.navigateTo({
						url: banner.linkUrl
					})
				}
			},
			async getBannerList() {
				try {
					const res = await homeApi.getBanners()
					if (res && res.data) {
						this.bannerList = res.data
						console.log('轮播图数据:', this.bannerList)
					}
				} catch (error) {
					console.error('获取轮播图异常:', error)
					uni.showToast({
						title: '获取轮播图失败',
						icon: 'none'
					})
				}
			},
			handleImageError(index) {
				console.error(`图片加载失败，索引：${index}`)
			},
			// 处理做教师按钮点击
			handleTeacher() {
				console.log("用户信息"+this.userinfo)
				// 如果当前用户角色为老师，那么不可以注册
				if(this.userinfo.role==2){
					uni.showToast({
					    title: '当前已经是教师啦，看看其他的吧',
					    icon: 'none',
					    duration: 2000
					});
					return;
				}
				if(!this.userinfo || Object.keys(this.userinfo).length === 0){
					uni.showToast({
					    title: '请先登录',
					    icon: 'none',
					    duration: 2000
					});
					return;
				}
				
				console.log("跳转到对应的页面")
				
				// 跳转到教师认证页面，而不是直接跳转到注册页面
				uni.navigateTo({
					url: '/pages/teacher/certification'
				})
			},
			// 处理找家教按钮点击
			handleFindTeacher() {
				uni.navigateTo({
					url: '/pages/teacher/list'
				})
			},
			// 获取推荐课程
			async getRecommendCourses() {
				try {
					// 使用新的API结构
					const res = await recommendApi.getHotRecommend()
					if (res && res.data) {
						console.log('热门推荐课程:', res.data);
						this.recommendCourses = res.data.slice(0, 4) // 只显示4个推荐课程
					}
				} catch (error) {
					console.error('获取推荐课程失败:', error)
					uni.showToast({
						title: '获取推荐课程失败',
						icon: 'none'
					})
				}
			},

			// 获取教师排行榜
			async getRankingList() {
				try {
					this.isLoadingRanking = true
					const res = await this.fetchRankingData(this.rankingType)

					if (res && res.code === 200 && res.data) {
						this.rankingList = res.data.slice(0, 5) // 只显示前5名
					} else {
						console.error('获取排行榜失败:', res)
						this.rankingList = []
					}
				} catch (error) {
					console.error('获取排行榜失败:', error)
					this.rankingList = []
				} finally {
					this.isLoadingRanking = false
				}
			},

			// 获取排行榜数据的API调用
			async fetchRankingData(type) {
				try {
					const response = await teacherApi.getTeacherRanking({
						type: type,
						limit: 5
					})
					return response
				} catch (error) {
					console.error('获取排行榜API调用失败:', error)
					throw error
				}
			},

			// 切换排行榜类型
			async switchRankingType(type) {
				if (this.rankingType === type) return

				this.rankingType = type
				await this.getRankingList()
			},

			// 获取排名样式类
			getRankClass(rank) {
				if (rank === 1) return 'rank-first'
				if (rank === 2) return 'rank-second'
				if (rank === 3) return 'rank-third'
				return 'rank-normal'
			},

			// 跳转到教师详情
			navigateToTeacherDetail(teacherId) {
				uni.navigateTo({
					url: `/pages/teacher/detail?id=${teacherId}`
				})
			},

			// 跳转到课程详情
			navigateToCourse(courseId) {
				// 记录点击行为
				this.trackBehavior('click', courseId)

				uni.navigateTo({
					url: `/pages/teacher/detail?id=${courseId}`
				})
			},

			// 跳转到教师列表页面并选择对应科目
			navigateToTeacherList(subjectName) {
				console.log('点击科目:', subjectName)
				uni.navigateTo({
					url: `/pages/teacher/list?subject=${encodeURIComponent(subjectName)}`,
					success: (res) => {
						console.log('跳转到教师列表页成功', res)
					},
					fail: (err) => {
						console.error('跳转到教师列表页失败', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			},
			// 记录用户行为
			trackBehavior(action, courseId) {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.id) {
					// 使用新的API方法记录用户行为
					try {
						console.log('记录用户行为:', action, courseId)
						// 注意：我们的新API可能没有这个方法，这里只是示例
						// 如果需要此功能，应该添加到recommendApi中
					} catch(err) {
						console.error('行为跟踪记录失败:', err)
					}
				}
			},
			// 跳转到更多课程
			goMore() {
				uni.navigateTo({
					url: '/pages/course/list'
				})
			},
			// 获取用户位置 - 改进版本
			async getUserLocation() {
				console.log('开始获取用户位置...')
				uni.showLoading({
					title: '定位中...'
				})

				// 设置定时器，确保加载提示在10秒后自动消失
				const loadingTimer = setTimeout(() => {
					uni.hideLoading();
					console.log('定位超时，使用默认位置')
					this.useDefaultLocation()
				}, 10000);

				try {
					// 首先检查是否有有效的缓存位置
					const cachedLocation = this.getCachedLocation()
					if (cachedLocation) {
						console.log('使用缓存位置:', cachedLocation.latitude, cachedLocation.longitude)
						this.latitude = cachedLocation.latitude
						this.longitude = cachedLocation.longitude

						// 获取到位置后加载附近老师
						if (this.isMapExpanded) {
							this.getNearbyTeachers()
						}

						clearTimeout(loadingTimer);
						uni.hideLoading()
						return
					}

					// 如果使用固定位置模式，直接使用保定市的经纬度
					if (this.useFixedLocation) {
						console.log('使用固定位置模式(保定市):', this.latitude, this.longitude)
						this.useDefaultLocation()
						clearTimeout(loadingTimer);
						uni.hideLoading()
						return
					}

					// 尝试获取真实位置
					await this.getRealLocation()

					// 清除定时器并隐藏加载提示
					clearTimeout(loadingTimer);
					uni.hideLoading()

				} catch (error) {
					console.error('获取位置过程出错:', error)
					clearTimeout(loadingTimer);
					uni.hideLoading()

					// 显示错误提示并使用默认位置
					uni.showModal({
						title: '定位失败',
						content: '无法获取您的位置信息，将使用保定市作为默认位置。您可以稍后在地图中手动调整位置。',
						showCancel: false,
						success: () => {
							this.useDefaultLocation()
						}
					})
				}
			},

			// 获取缓存的位置信息 - 改进版本
			getCachedLocation() {
				try {
					const platform = locationHelper.getPlatform()
					console.log('获取缓存位置，当前平台:', platform)

					// 检查用户信息中的位置
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo && userInfo.latitude && userInfo.longitude) {
						const lat = parseFloat(userInfo.latitude);
						const lng = parseFloat(userInfo.longitude);

						// 使用新的坐标验证方法
						if (locationHelper.validateCoordinates(lat, lng)) {
							// 检查是否是可疑的坐标（如深圳、广州等可能的错误定位）
							const suspiciousCoords = this.checkSuspiciousCoordinates(lat, lng)
							if (!suspiciousCoords.isSuspicious) {
								console.log('找到有效的用户位置缓存:', lat, lng)
								return { latitude: lat, longitude: lng, source: 'userInfo' }
							} else {
								console.log('检测到可疑坐标缓存:', suspiciousCoords.reason, '将重新定位')
							}
						}
					}

					// 检查位置缓存
					const locationCache = uni.getStorageSync('userLocation');
					if (locationCache && locationCache.latitude && locationCache.longitude) {
						const cacheAge = Date.now() - (locationCache.timestamp || 0)
						const cachePlatform = locationCache.platform || 'unknown'

						// 缓存有效期：同平台30分钟，跨平台10分钟
						const maxAge = (cachePlatform === platform) ? 30 * 60 * 1000 : 10 * 60 * 1000

						if (cacheAge < maxAge) {
							const lat = parseFloat(locationCache.latitude);
							const lng = parseFloat(locationCache.longitude);

							if (locationHelper.validateCoordinates(lat, lng)) {
								// 检查是否是可疑的坐标
								const suspiciousCoords = this.checkSuspiciousCoordinates(lat, lng)
								if (!suspiciousCoords.isSuspicious) {
									console.log('找到有效的位置缓存:', lat, lng, '平台:', cachePlatform)
									return { latitude: lat, longitude: lng, source: 'locationCache', platform: cachePlatform }
								} else {
									console.log('检测到可疑坐标缓存:', suspiciousCoords.reason)
								}
							}
						} else {
							console.log('位置缓存已过期，缓存时间:', new Date(locationCache.timestamp))
						}
					}
				} catch (error) {
					console.error('获取缓存位置失败:', error);
				}

				return null
			},

			// 检查是否是可疑的坐标
			checkSuspiciousCoordinates(lat, lng) {
				// 检查是否是常见的错误定位城市
				const suspiciousCities = [
					{ name: '深圳', lat: 22.5431, lng: 114.0579, tolerance: 0.1 },
					{ name: '广州', lat: 23.1291, lng: 113.2644, tolerance: 0.1 },
					{ name: '深圳(具体坐标)', lat: 23.129163, lng: 113.264435, tolerance: 0.01 }
				]

				for (const city of suspiciousCities) {
					const distance = locationHelper.calculateDistance(lat, lng, city.lat, city.lng)
					if (distance < city.tolerance) {
						return {
							isSuspicious: true,
							reason: `坐标疑似为${city.name}，可能是错误定位`,
							city: city.name,
							distance: distance
						}
					}
				}

				return { isSuspicious: false }
			},

			// 获取真实位置 - 使用新的位置辅助工具
			async getRealLocation() {
				console.log('尝试获取真实位置...')

				try {
					// 首先检查权限
					const permissionStatus = await locationHelper.checkLocationPermission()
					console.log('位置权限状态:', permissionStatus)

					if (!permissionStatus.granted) {
						console.log('权限未授予，尝试请求权限...')
						const requestResult = await locationHelper.requestLocationPermission()
						console.log('权限请求结果:', requestResult)

						if (!requestResult.granted) {
							throw new Error('位置权限被拒绝: ' + requestResult.reason)
						}
					}

					// 使用统一的位置获取接口
					const location = await locationHelper.getLocation({
						timeout: 15000,
						maximumAge: 30000
					})

					console.log('获取真实位置成功:', location)

					// 验证获取到的位置是否合理
					if (locationHelper.validateCoordinates(location.latitude, location.longitude)) {
						this.latitude = location.latitude
						this.longitude = location.longitude

						// 保存位置到缓存
						this.saveLocationToCache(location.latitude, location.longitude)

						// 获取到位置后加载附近老师
						if (this.isMapExpanded) {
							this.getNearbyTeachers()
						}

						return location
					} else {
						console.warn('获取到的位置坐标异常:', location.latitude, location.longitude)
						throw new Error('位置坐标异常')
					}
				} catch (error) {
					console.error('获取真实位置失败:', error)
					throw error
				}
			},

			// 保存位置到缓存
			saveLocationToCache(lat, lng) {
				try {
					// 保存到用户信息
					const userInfo = uni.getStorageSync('userInfo') || {};
					userInfo.latitude = lat;
					userInfo.longitude = lng;
					uni.setStorageSync('userInfo', userInfo);

					// 保存到位置缓存
					uni.setStorageSync('userLocation', {
						latitude: lat,
						longitude: lng,
						timestamp: Date.now(),
						platform: locationHelper.getPlatform()
					});

					console.log('位置已保存到缓存:', lat, lng, '平台:', locationHelper.getPlatform());
				} catch (e) {
					console.error('保存位置信息失败:', e);
				}
			},

			// 使用默认位置（保定市）
			useDefaultLocation() {
				console.log('使用默认位置(保定市)')
				const defaultCoords = locationHelper.BAODING_COORDINATES
				this.latitude = defaultCoords.latitude;
				this.longitude = defaultCoords.longitude;

				// 保存默认位置到缓存
				this.saveLocationToCache(defaultCoords.latitude, defaultCoords.longitude)

				// 获取到位置后加载附近老师
				if (this.isMapExpanded) {
					this.getNearbyTeachers()
				}
			},
			
			// 获取附近老师
			async getNearbyTeachers() {
				// 重置错误状态
				this.mapError = false;
				this.mapErrorMessage = '';
				
				// 添加加载状态
				uni.showLoading({
					title: '获取附近老师...'
				})
				
				// 清空之前的标记点
				this.markers = [];
				this.nearbyTeachers = [];
				
				try {
					const res = await mapApi.getNearbyTeachers({
						latitude: this.latitude,
						longitude: this.longitude,
						radius: this.searchRadius // 使用searchRadius变量
					})
          console.log("附近的老师"+JSON.stringify(res))
					if (res && res.data) {
            console.log("附近的老师"+JSON.stringify(res.data.data))
						this.nearbyTeachers = res.data.data
						console.log("nearbyTeachers"+this.nearbyTeachers)
						// 显示搜索进度指示
						uni.showToast({
							title: `搜索中...`,
							icon: 'loading',
							duration: 1500
						})
						
						// 延迟加载标记点，模拟搜索过程
						const totalTeachers = this.nearbyTeachers.length;
						const batchSize = 3; // 每批次显示的老师数量
						const delay = 500; // 每批次延迟时间(毫秒)
						
						// 按批次展示老师标记点
						for (let i = 0; i < totalTeachers; i += batchSize) {
							await new Promise(resolve => setTimeout(resolve, delay));
							
							// 获取当前批次的老师
							const currentBatch = this.nearbyTeachers.slice(i, Math.min(i + batchSize, totalTeachers));
							
							// 为当前批次的老师创建标记点
							const newMarkers = currentBatch.map((teacher, idx) => {
								// 获取老师位置信息 - 根据API响应结构
								const teacherLat = teacher.location ? teacher.location.latitude : teacher.latitude
								const teacherLng = teacher.location ? teacher.location.longitude : teacher.longitude
								const teacherDistance = teacher.location ? teacher.location.distance : teacher.distance

								console.log(`创建标记点 - 老师: ${teacher.name}, 位置: ${teacherLat}, ${teacherLng}`)

								return {
									id: i + idx,
									latitude: teacherLat,
									longitude: teacherLng,
									title: teacher.name,
									width: 50,
									height: 50,
									iconPath: teacher.avatar || 'http://101.200.154.121:19000/teacher-manage-static/static/user-active.png', // 使用老师头像或默认头像
									label: {
										content: teacher.name,
										color: '#333333',
										fontSize: 12,
										bgColor: '#FFFFFF',
										padding: 5,
										borderRadius: 3,
										textAlign: 'center',
										anchorX: 0,
										anchorY: -65
									},
									callout: {
										content: `${teacher.name}\n${teacher.title || '教师'}\n${teacher.subjectsText || (teacher.subjects ? teacher.subjects.join('、') : '未知科目')}\n距离: ${teacherDistance || '未知'}公里`,
										color: '#333333',
										fontSize: 14,
										borderRadius: 8,
										padding: 10,
										bgColor: '#ffffff',
										borderWidth: 1,
										borderColor: '#f0f0f0',
										display: 'BYCLICK' // 点击时显示详情气泡
									},
									anchor: {
										x: 0.5,
										y: 1.0
									}
								}
							});
							
							console.log('新增标记点:', newMarkers)

							// 添加新批次的标记点到地图上
							this.markers = [...this.markers, ...newMarkers];

							console.log('当前所有标记点:', this.markers)

							// 更新搜索状态提示
							if (i + batchSize < totalTeachers) {
								uni.showToast({
									title: `已找到 ${i + batchSize} 位老师，继续搜索中...`,
									icon: 'none',
									duration: 800
								});
							}
						}
						
						if (totalTeachers === 0) {
							uni.showToast({
								title: `${this.searchRadius}公里内没有找到老师`,
								icon: 'none',
								duration: 2000
							})
						} else {
							console.log(`最终结果: 找到${totalTeachers}位老师，创建了${this.markers.length}个标记点`)

							// 显示最终找到的老师数量
							uni.showToast({
								title: `找到${totalTeachers}位老师`,
								icon: 'success',
								duration: 1500
							})
						}
					}
				} catch (error) {
					console.error('获取附近老师失败：', error)
					// 设置错误状态
					this.mapError = true;
					this.mapErrorMessage = '获取附近老师失败';
					
					// 显示错误提示
					uni.showToast({
						title: '获取附近老师失败',
						icon: 'none',
						duration: 2000
					})
				} finally {
					uni.hideLoading()
				}
			},
			
			// 处理标记点点击
			handleMarkerTap(e) {
				const teacher = this.nearbyTeachers[e.markerId]
				if (teacher) {
					uni.navigateTo({
						url: `/pages/teacher/detail?id=${teacher.id}`
					})
				}
			},
			
			// 处理触摸开始
			handleTouchStart(e) {
				this.touchStartY = e.touches[0].clientY
				this.isDragging = true
				
				// 记录开始触摸的时间，用于判断是否是快速滑动
				this.touchStartTime = Date.now()
			},
			
			// 处理触摸移动
			handleTouchMove(e) {
				if (!this.isDragging) return
				
				this.touchMoveY = e.touches[0].clientY
				const deltaY = this.touchStartY - this.touchMoveY
				
				// 只有当地图未展开时才允许上滑展开
				if (deltaY > 50 && !this.isMapExpanded) {
					this.expandMap()
				}
				
				// 地图展开后，下滑操作不再触发收起
				// 改为通过按钮点击收起，避免误触
			},
			
			// 处理触摸结束
			handleTouchEnd() {
				this.isDragging = false
				this.touchStartY = 0
				this.touchMoveY = 0
			},
			
			// 展开地图 - 改进版本
			async expandMap() {
				if (!this.isMapExpanded) {
					console.log('展开地图，当前位置:', this.latitude, this.longitude)

					// 设置地图状态为展开
					this.isMapExpanded = true

					// 检查当前位置是否有效
					if (!this.latitude || !this.longitude ||
						(this.latitude === 38.8721 && this.longitude === 115.4925)) {
						// 如果没有有效位置或使用的是默认位置，尝试重新定位
						console.log('当前位置无效或为默认位置，尝试重新定位...')

						uni.showLoading({
							title: '获取位置中...'
						})

						try {
							await this.getRealLocation()
							console.log('重新定位成功:', this.latitude, this.longitude)
						} catch (error) {
							console.error('重新定位失败:', error)
							// 使用默认位置
							this.useDefaultLocation()
						} finally {
							uni.hideLoading()
						}
					}

					// 等待地图渲染完成后再获取附近老师
					setTimeout(() => {
						// 获取当前位置的老师
						this.getNearbyTeachers()

						// 确保地图移动到当前位置
						this.$nextTick(() => {
							const mapContext = uni.createMapContext('teacherMap', this);
							mapContext.moveToLocation({
								latitude: this.latitude,
								longitude: this.longitude,
								success: () => {
									console.log('成功移动地图到位置:', this.latitude, this.longitude);
								},
								fail: (err) => {
									console.error('移动地图失败:', err);
									// 手动设置地图中心点
									mapContext.setCenterOffset({
										latitude: this.latitude,
										longitude: this.longitude
									})
								}
							});
						})
					}, 300)
				}
			},
			
			// 收起地图
			collapseMap() {
				if (this.isMapExpanded) {
					this.isMapExpanded = false
				}
			},
			async retryGetTeachers() {
				this.mapError = false
				await this.getNearbyTeachers()
			},

			// 强制重新定位 - 改进版本
			async forceRelocate() {
				console.log('用户点击强制重新定位')
				uni.showLoading({
					title: '重新定位中...'
				});

				try {
					// 清除可能存在的错误缓存
					this.clearLocationCache()

					// 强制获取当前位置
					const location = await this.getRealLocation()

					console.log('强制重新定位成功:', location.latitude, location.longitude);

					// 如果地图已展开，移动地图并刷新附近老师
					if (this.isMapExpanded) {
						this.$nextTick(() => {
							const mapContext = uni.createMapContext('teacherMap', this);
							mapContext.moveToLocation({
								latitude: this.latitude,
								longitude: this.longitude,
								success: () => {
									console.log('地图移动到新位置成功');
									// 刷新附近老师
									this.getNearbyTeachers();
								},
								fail: (err) => {
									console.error('移动地图失败:', err);
									// 手动设置地图中心
									mapContext.setCenterOffset({
										latitude: this.latitude,
										longitude: this.longitude
									})
									this.getNearbyTeachers();
								}
							});
						});
					}

					uni.hideLoading();
					uni.showToast({
						title: '定位成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('强制重新定位失败:', error);
					uni.hideLoading();

					// 显示详细的错误信息
					let errorMsg = '定位失败'
					if (error.errMsg) {
						if (error.errMsg.includes('auth deny')) {
							errorMsg = '定位权限被拒绝，请在设置中开启位置权限'
						} else if (error.errMsg.includes('timeout')) {
							errorMsg = '定位超时，请检查网络连接'
						} else if (error.errMsg.includes('fail')) {
							errorMsg = '定位服务不可用，请稍后重试'
						}
					}

					uni.showModal({
						title: '定位失败',
						content: errorMsg + '。是否使用保定市作为默认位置？',
						success: (res) => {
							if (res.confirm) {
								this.useDefaultLocation()
								if (this.isMapExpanded) {
									this.getNearbyTeachers();
								}
							}
						}
					});
				}
			},

			// 清除位置缓存并重新定位 - 改进版本
			clearLocationCache() {
				try {
					console.log('清除位置缓存...')

					// 显示当前位置信息（调试用）
					const userInfo = uni.getStorageSync('userInfo') || {};
					console.log('清除前的位置信息:', {
						userInfoLat: userInfo.latitude,
						userInfoLng: userInfo.longitude,
						currentLat: this.latitude,
						currentLng: this.longitude
					});

					// 清除用户信息中的位置数据
					if (userInfo.latitude) delete userInfo.latitude;
					if (userInfo.longitude) delete userInfo.longitude;
					uni.setStorageSync('userInfo', userInfo);

					// 清除其他位置相关的缓存
					uni.removeStorageSync('userLocation');
					uni.removeStorageSync('hasLocation');

					console.log('位置缓存已清除');

					// 重置为默认位置（保定市）
					this.useDefaultLocation();

					// 显示提示
					uni.showToast({
						title: '缓存已清除，正在重新定位...',
						icon: 'none',
						duration: 2000
					});

					// 延迟重新获取位置，避免立即使用缓存
					setTimeout(() => {
						this.getUserLocation();
					}, 1000);

				} catch (error) {
					console.error('清除位置缓存失败:', error);
					uni.showToast({
						title: '清除缓存失败',
						icon: 'none'
					});
				}
			},
			decreaseRadius() {
				if (this.searchRadius > 1) {
					this.searchRadius -= 1
					this.getNearbyTeachers()
				}
			},
			increaseRadius() {
				if (this.searchRadius < 20) {
					this.searchRadius += 1
					this.getNearbyTeachers()
				}
			},
			refreshNearbyTeachers() {
				this.getNearbyTeachers()
			},
			// 刷新当前位置
			refreshLocation() {
				return new Promise((resolve) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.latitude = res.latitude
							this.longitude = res.longitude
							resolve(true)
						},
						fail: () => {
							resolve(false)
						}
					})
				})
			},
			// 重新定位到当前位置
			relocateToCurrentPosition() {
				// 显示加载指示器
				uni.showLoading({
					title: '定位中...'
				});
				
				// 如果使用固定位置模式
				if (this.useFixedLocation) {
					console.log('使用固定位置(保定市)重新定位:', this.latitude, this.longitude);
					
					// 如果地图已展开，更新地图中心点到保定市
					if (this.isMapExpanded) {
						this.$nextTick(() => {
							// 创建地图上下文
							const mapContext = uni.createMapContext('teacherMap', this);
							
							// 手动移动地图到保定市位置
							mapContext.moveToLocation({
								latitude: this.latitude,
								longitude: this.longitude,
								success: () => {
									console.log('成功移动到保定市位置');
									// 刷新附近老师
									this.getNearbyTeachers();
								},
								fail: (err) => {
									console.error('移动地图失败:', err);
								}
							});
						});
					}
					
					uni.hideLoading();
					uni.showToast({
						title: '已定位到保定市',
						icon: 'success',
						duration: 1500
					});
					return;
				}
				
				// 否则获取真实位置
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('成功获取当前位置:', res);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						
						// 保存位置到本地存储
						try {
							const userInfo = uni.getStorageSync('userInfo') || {};
							userInfo.latitude = res.latitude;
							userInfo.longitude = res.longitude;
							uni.setStorageSync('userInfo', userInfo);
						} catch (e) {
							console.error('保存位置信息失败:', e);
						}
						
						// 如果地图已展开，更新地图中心点
						if (this.isMapExpanded) {
							this.$nextTick(() => {
								// 移动地图到当前位置
								const mapContext = uni.createMapContext('teacherMap', this);
								mapContext.moveToLocation({
									success: () => {
										console.log('成功移动到当前位置');
										// 刷新附近老师
										this.getNearbyTeachers();
									},
									fail: (err) => {
										console.error('移动地图失败:', err);
									}
								});
							});
						}
						
						uni.hideLoading();
						uni.showToast({
							title: '定位成功',
							icon: 'success',
							duration: 1500
						});
					},
					fail: (err) => {
						console.error('定位失败:', err);
						uni.hideLoading();
						uni.showToast({
							title: '定位失败，请检查定位权限',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			/**
			 * 导航到个性化推荐页面
			 */
			navigateToRecommend() {
				uni.navigateTo({
					url: '/pages/recommend/index'
				});
			},
			// 跳转到教师列表页面并筛选指定科目
			// navigateToTeacherList(subjectName) {
			// 	uni.navigateTo({
			// 		url: `/pages/teacher/list?subject=${encodeURIComponent(subjectName)}`
			// 	})
			// }
		}
	}
</script>

<style>
	.container {
		padding: 0;
		background: linear-gradient(180deg, #f8faff 0%, #f5f6fa 100%);
		min-height: 100vh;
		padding-bottom: 120rpx;
		position: relative;
	}

	/* 搜索栏样式 */
	.search-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		margin: 20rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 4rpx 20rpx rgba(64, 128, 255, 0.1);
		border: 2rpx solid rgba(64, 128, 255, 0.1);
		transition: all 0.3s ease;
	}

	.search-bar:active {
		box-shadow: 0 6rpx 25rpx rgba(64, 128, 255, 0.15);
		border-color: rgba(64, 128, 255, 0.2);
		transform: translateY(-2rpx);
	}

	.location-icon {
		margin-right: 15rpx;
		font-size: 32rpx;
		color: #4080FF;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-input::placeholder {
		color: #999;
	}

	/* 报名入口样式 */
	.signup-entrance {
		background: #fff;
		border-radius: 20rpx;
		padding: 35rpx;
		margin: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
	}

	.signup-entrance::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	}

	.entrance-button {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		text-align: center;
		padding: 25rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.entrance-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}

	.entrance-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 10rpx rgba(102, 126, 234, 0.2);
	}

	.entrance-button:active::before {
		left: 100%;
	}

	/* 功能按钮样式 */
	.function-buttons {
		display: flex;
		gap: 20rpx;
		margin: 20rpx;
		margin-bottom: 30rpx;
	}

	.function-button {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 35rpx 25rpx;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.function-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
		pointer-events: none;
	}

	.function-button:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.orange {
		background: linear-gradient(135deg, #FF6B00 0%, #FF8F00 100%);
	}

	.green {
		background: linear-gradient(135deg, #006E7F 0%, #00ACC1 100%);
	}

	.icon-wrap {
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 25rpx;
		font-size: 32rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.button-content {
		color: #fff;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}

	.main-text {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 4rpx;
	}

	.sub-text {
		font-size: 24rpx;
		opacity: 0.9;
	}

	/* 科目网格样式 */
	.subject-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 25rpx;
		padding: 30rpx 0;
	}

	.subject-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 10rpx;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.subject-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(64, 128, 255, 0.05), rgba(118, 75, 162, 0.05));
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.subject-item:active {
		transform: scale(0.95);
	}

	.subject-item:active::before {
		opacity: 1;
	}

	/* PC端悬停效果 */
	/* #ifdef H5 */
	.subject-item:hover {
		background: rgba(224, 46, 36, 0.05);
		cursor: pointer;
	}
	/* #endif */

	.subject-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 15rpx;
		filter: drop-shadow(0 2rpx 8rpx rgba(64, 128, 255, 0.2));
		transition: transform 0.3s ease;
	}

	.subject-item:active .subject-icon {
		transform: scale(1.1);
	}

	.subject-name {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		font-weight: 500;
		position: relative;
		z-index: 1;
	}

	/* 推荐科目样式 */
	.recommend-section {
		padding: 35rpx;
		background: #fff;
		margin: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 25rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
	}

	.recommend-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-actions {
		display: flex;
		gap: 10rpx;
	}

	.action-item {
		font-size: 28rpx;
		color: #666;
	}

	.more {
		font-size: 28rpx;
		color: #666;
	}

	.course-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.course-item {
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.course-image {
		width: 100%;
		height: 200rpx;
		background: #f5f5f5;
	}

	.course-info {
		padding: 16rpx;
	}

	.course-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		height: 80rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.course-price {
		margin-top: 12rpx;
		display: flex;
		align-items: baseline;
	}

	.price {
		font-size: 32rpx;
		color: #ff6b6b;
		font-weight: bold;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 12rpx;
	}

	/* 轮播图容器样式 */
	.banner-container {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 30rpx rgba(64, 128, 255, 0.15);
		position: relative;
	}

	.banner-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
		z-index: 1;
		pointer-events: none;
	}

	/* 轮播图样式 */
	.banner-swiper {
		width: 100%;
		height: 320rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.banner-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	/* 地图容器样式优化 */
	.map-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.95) 100%);
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 100;
		box-shadow: 0 -6rpx 30rpx rgba(64, 128, 255, 0.15);
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-top: 3rpx solid rgba(64, 128, 255, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.map-expanded {
		height: 100vh;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
		border-top: none;
		backdrop-filter: none;
	}
	
	/* 地图内容容器 */
	.map-content {
		position: relative;
		width: 100%;
		height: calc(100% - 60rpx);
	}

	/* 上滑提示条样式 */
	.drag-indicator {
		position: relative;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15rpx 0;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.95) 100%);
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		box-shadow: 0 -6rpx 30rpx rgba(64, 128, 255, 0.15);
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
	}

	.drag-indicator:active {
		background: linear-gradient(180deg, rgba(64, 128, 255, 0.05) 0%, rgba(248, 250, 255, 0.95) 100%);
	}

	.drag-bar {
		width: 80rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #4080FF 0%, #667eea 100%);
		border-radius: 4rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(64, 128, 255, 0.3);
		transition: all 0.3s ease;
	}

	.drag-indicator:active .drag-bar {
		width: 100rpx;
		box-shadow: 0 4rpx 12rpx rgba(64, 128, 255, 0.4);
	}

	.drag-text {
		font-size: 26rpx;
		color: #4080FF;
		font-weight: 500;
	}

	.close-btn {
		position: absolute;
		top: 50%;
		right: 25rpx;
		transform: translateY(-50%);
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
		z-index: 10;
		transition: all 0.3s ease;
	}

	.close-btn:active {
		transform: translateY(-50%) scale(0.9);
		box-shadow: 0 2rpx 10rpx rgba(255, 107, 107, 0.2);
	}

	/* 地图样式优化 */
	.teacher-map {
		width: 100%;
		height: 100%;
		opacity: 0;
		animation: fadeIn 0.3s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* 错误提示覆盖层样式 */
	.map-error-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}
	
	.retry-btn {
		background-color: #4080FF;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	/* 返回首页按钮样式 */
	.back-to-home {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: #4080FF;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		z-index: 10;
		display: flex;
		align-items: center;
	}

	/* 搜索半径设置样式 */
	.radius-control {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		z-index: 10;
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.radius-label {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.radius-actions {
		display: flex;
		gap: 10rpx;
	}

	.radius-btn {
		width: 60rpx;
		height: 60rpx;
		background-color: #4080FF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.search-btn {
		background-color: #FF6B00;
		width: auto;
		padding: 0 20rpx;
		margin-top: 10rpx;
	}

	/* 定位按钮样式 */
	.location-btn {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.location-icon-wrapper {
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}

	.location-icon-text {
		font-size: 40rpx;
	}

	/* 重新定位按钮样式 */
	.clear-cache-btn {
		position: absolute;
		bottom: 130rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-cache-icon-wrapper {
		width: 40rpx;
		height: 40rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-cache-icon-text {
		font-size: 32rpx;
		color: #4080FF;
	}

	/* 排行榜样式 */
	.ranking-section {
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 30rpx;
	}

	.ranking-section .section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.ranking-section .section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.ranking-section .header-actions {
		display: flex;
		gap: 20rpx;
	}

	.ranking-section .action-item {
		font-size: 26rpx;
		color: #999;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		transition: all 0.3s;
	}

	.ranking-section .action-item.active {
		color: #4080FF;
		background: #f0f7ff;
	}

	.ranking-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		transition: all 0.3s;
	}

	.ranking-item:active {
		background: #f0f0f0;
		transform: scale(0.98);
	}

	.rank-number {
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.rank-first {
		background: linear-gradient(135deg, #FFD700, #FFA500);
		color: #fff;
	}

	.rank-second {
		background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
		color: #fff;
	}

	.rank-third {
		background: linear-gradient(135deg, #CD7F32, #B8860B);
		color: #fff;
	}

	.rank-normal {
		background: #e9ecef;
		color: #666;
	}

	.rank-text {
		font-size: 24rpx;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.teacher-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		margin-right: 15rpx;
	}

	.teacher-details {
		flex: 1;
	}

	.teacher-name-line {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.teacher-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 10rpx;
	}

	.certification-badge {
		background: #52c41a;
		color: #fff;
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
		font-size: 20rpx;
	}

	.badge-text {
		font-size: 20rpx;
	}

	.teacher-stats {
		display: flex;
		gap: 15rpx;
	}

	.stat-item {
		font-size: 22rpx;
		color: #666;
	}

	.ranking-extra {
		text-align: center;
	}

	.score-display {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.score-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #4080FF;
	}

	.score-label {
		font-size: 20rpx;
		color: #999;
		margin-top: 4rpx;
	}

	.ranking-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
	}

	.loading-spinner {
		width: 50rpx;
		height: 50rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #4080FF;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 26rpx;
		color: #999;
	}

	.ranking-empty {
		text-align: center;
		padding: 60rpx 0;
	}

	.empty-text {
		font-size: 26rpx;
		color: #999;
	}
</style>

